<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>给爱的人发个邮件</title>
    <style>
        *{
           box-sizing: border-box;
        }
        ul,li{
            list-style-type: none;
            cursor: pointer;
        }
        li:hover{
            background-color: #bfdded
        }
        ul{
            border:solid 1px #d8d8d8;
            width:200px;
            padding:0;
            margin: 0;
            border-top:none;
            display: none;
        }
        /* ul li:nth-child(1){
            background-color: blue;
        } */
        input{
            height:26px;
            border:solid 1px #d8d8d8;
            width:200px;
            padding: 0 5px;
        }
        .email-sug{
            display: block;
        }
        .select{
            background-color: #bfdded 
        }
    </style>
</head>
<body>      
    <div class="wrapper">
        <input id="email-input" type="text">
        <ul id="email-sug-wrapper" class="email-sug"></ul>
    </div>
</body>
</html>
<script>
    var input = document.getElementById('email-input');//输入框
    var ul =  document.getElementById('email-sug-wrapper');//列表
    var body = document.getElementsByTagName('body')[0];
    var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
    function getVal (val){
        var index = val.indexOf("@");
        var youxiang = '';
        var str ='';//文字
        if(index !== -1){
            index = index +1;
            str = zhuanyi(val.substring(0,index));
            youxiang = val.substring(index);
            console.log(str)
        }else{
            str = zhuanyi(val + "@");
            console.log(str)
        }
    
        var list = '';
        for(let i = 0;i<postfixList.length;i++){
            if(youxiang.length < 1){
                list += `<li>${str}${postfixList[i]}</li>`
                console.log('113')
            }else{
                if(postfixList[i].indexOf(youxiang) !== -1){
                    list += `<li>${str}${postfixList[i]}</li>`
                    console.log('111')
                }
            }
            
        }
        ul.innerHTML = list;
        document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].classList.add("select");
      
    }
    document.onkeyup =  function(e){
        var select =  document.getElementsByClassName('select')[0];
        console.log(e.keyCode)
        if(e.keyCode == 38){
            select.classList.remove('select');
            if(select.previousElementSibling  == '' || select.previousElementSibling  == null){
                document.getElementsByTagName('ul')[0].getElementsByTagName('li')[postfixList.length - 1].classList.add("select");
            }else{
               select.previousElementSibling .classList.add('select');
            }
        }else if(e.keyCode == 40){
            select.classList.remove('select');
            if(select.nextElementSibling == '' || select.nextElementSibling == null){
                document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].classList.add("select");
            }else{
               select.nextElementSibling.classList.add('select');
            }
        }else if(e.keyCode == 13){
           console.log(e.keyCode,'enter')
           input.value = document.getElementsByClassName('select')[0].innerText;
           ul.classList.remove('email-sug');
        }else if(e.keyCode == 27){

        }
    }

    input.onkeyup = function(e){
        console.log(e.keyCode)
        var select =  document.getElementsByClassName('select')[0];
        var str = input.value.trim();
        var space = (str.split(" ")).length -1;
        if(str.length > 0 && space<2){
            ul.classList.add('email-sug');
            getVal (str);
        }else{
            ul.classList.remove('email-sug');
        }
    }
    ul.addEventListener('click',function(e){
        console.log(e.target.innerHTML)
        if(e.target.nodeName.toLowerCase() == "li"){
            input.value = zhuanHTML(e.target.innerHTML);
            ul.classList.remove('email-sug');
        }
    })

    function zhuanyi(sHtml){
        return sHtml.replace(/[<>&"]/g,function(c){return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c];});
    }
    function zhuanHTML(str){
        var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
        return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
    }
     console.log(zhuanyi('<p></p>'))

    

</script>

